<div class="row">
  <div class="col-md-6">
    <div class="box box-primary">
      <div class="box-header">
        <h3 class="box-title">Alerts</h3>
      </div>
      <div class="box-body">
        <div ng-controller="SandboxBootstrapAlertCtrl">
          <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}
          </alert>
          <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="box box-primary">
      <div class="box-header">
        <h3 class="box-title">Tabs</h3>
      </div>
      <div class="box-body">
        <div ng-controller="SandboxBootstrapTabsCtrl">
          <p>Select a tab by setting active binding to true:</p>

          <p>
            <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
            <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
          </p>
          <p>
            <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable /
                                                                                                    Disable third tab
            </button>
          </p>
          <hr/>
          <tabset>
            <tab heading="Static title">Static content</tab>
            <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"
                 disabled="tab.disabled">
              {{tab.content}}
            </tab>
            <tab select="alertMe()">
              <tab-heading>
                <i class="glyphicon glyphicon-bell"></i> Alert!
              </tab-heading>
              I've got an HTML heading, and a select callback. Pretty cool!
            </tab>
          </tabset>
          <hr/>
          <tabset vertical="true" type="pills">
            <tab heading="Vertical 1">Vertical content 1</tab>
            <tab heading="Vertical 2">Vertical content 2</tab>
          </tabset>
          <hr/>
          <tabset justified="true">
            <tab heading="Justified">Justified content</tab>
            <tab heading="SJ">Short Labeled Justified content</tab>
            <tab heading="Long Justified">Long Labeled Justified content</tab>
          </tabset>
        </div>
      </div>
    </div>
  </div>
</div>
